<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位技巧1</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            font-size: 40px;
            color: #fff;
            font-weight: bold;
            position: fixed;
            top: 0;
            /* 100vw 100%的视口宽度 viewport width */
            /* 100vh 100%的视口高度 viewport height */
            width: 100vw;
        }
        .main {
            margin-top: 130px;
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left:20px;
        }
        .right {
            background-color: #F35336;
            right:20px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左侧的广告条</div>
    <div class="right">我是右侧的广告条</div>
    <div class="main">
        我是内容
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate dicta distinctio dolore
            doloribus ea ex facilis fugit harum minus neque, officiis omnis placeat possimus quibusdam suscipit vel.
            Officia, voluptas?
        </div>
        <div>Animi at fugit numquam quaerat! Dolor doloremque molestias nobis ratione sequi! Ad cum, dicta dolor dolores
            eligendi, eos est ex necessitatibus non optio perferendis provident quia sapiente temporibus veniam vero.
        </div>
        <div>Sapiente velit, veritatis? A consequatur dolorem harum illo praesentium quasi ullam. A ad aperiam atque
            consequatur impedit ipsa libero magnam maiores maxime neque possimus quam quas, quidem suscipit tempora.
            Debitis.
        </div>
        <div>Aut cum cumque dolorem sed temporibus. Accusantium amet blanditiis doloribus, eligendi error esse incidunt
            magni minima nobis placeat quasi ratione totam veniam veritatis voluptatum? Ab eos facere obcaecati
            perferendis ratione!
        </div>
        <div>At aut consequuntur dolorem dolorum et hic illo ipsa itaque laborum maiores, necessitatibus nostrum quos
            recusandae tempore veniam voluptas voluptatem. Dolor eius et fugiat nobis officia officiis omnis velit
            voluptatibus?
        </div>
        <div>Distinctio dolor earum eligendi, explicabo iste iure iusto, laudantium nihil nobis non quam quidem quod,
            saepe ut voluptatum? Consectetur enim magni minus quam ratione recusandae, repellat reprehenderit ut velit
            vero.
        </div>
        <div>Adipisci alias deleniti dignissimos, dolores odit perferendis sequi? A, assumenda, consectetur culpa
            doloribus eius exercitationem harum maiores maxime nostrum omnis perspiciatis placeat porro quas quisquam
            recusandae repudiandae rerum sequi velit?
        </div>
        <div>Commodi debitis molestiae necessitatibus nesciunt nulla placeat, provident similique sunt vel. A aliquam
            doloremque est fugiat fugit illo inventore natus nihil odit officia quis recusandae reprehenderit velit
            voluptate voluptatem, voluptatum!
        </div>
        <div>Aperiam commodi deserunt dolore, dolorem et inventore minima nam provident, quas reiciendis rem sint
            tempore, veritatis. Ab, asperiores autem beatae deleniti in, ipsa optio, quaerat quas quidem tempore
            temporibus velit.
        </div>
        <div>Ex illum laboriosam, nihil nisi nobis quaerat quam! Deserunt eligendi, ex excepturi expedita minus nemo
            perspiciatis porro temporibus veritatis voluptatibus? Aperiam delectus deserunt distinctio dolor ipsa nihil
            nisi velit voluptatem!
        </div>
        <div>Alias at commodi cumque dolorem eaque expedita impedit incidunt minima molestiae neque optio quaerat quia,
            quidem quis repellat sunt totam voluptatem? Architecto corporis debitis earum eligendi harum, natus
            repellendus temporibus.
        </div>
        <div>Aliquid cum distinctio esse illo voluptas? Delectus dignissimos doloremque ducimus, eos error explicabo
            maiores, modi nam nesciunt non numquam, sunt totam voluptatem. Autem beatae cum delectus dicta et molestiae
            ut!
        </div>
        <div>Accusamus amet atque aut, autem dolore ea fuga id in laboriosam laborum nisi non odit optio quam quas qui
            quia quidem quisquam reprehenderit totam? Assumenda expedita quaerat sunt tempora. Exercitationem!
        </div>
        <div>A animi architecto aspernatur blanditiis culpa cupiditate dignissimos distinctio eligendi eos est fugiat
            fugit illum itaque laudantium magnam molestias nisi nobis porro praesentium quae quasi quia repellat rerum,
            sed, vel.
        </div>
        <div>Beatae delectus dolorum eligendi illo ipsa pariatur voluptatibus? Accusamus accusantium aliquid animi
            consectetur consequatur, ex facilis, illo iste itaque pariatur provident vero voluptate, voluptatibus! Alias
            et eveniet sequi ullam voluptate.
        </div>
        <div>Amet animi atque consequuntur, dignissimos distinctio dolores ea earum ex illo in labore laboriosam minima
            minus nesciunt odio placeat possimus provident quasi qui quod ratione rem similique tempore veniam
            voluptatibus.
        </div>
        <div>Alias dolores facere ipsum modi nobis quaerat quia! Architecto aspernatur commodi corporis delectus
            ducimus, eius, eveniet exercitationem facere libero magni nulla obcaecati quis ratione similique suscipit
            ullam vel vitae voluptate.
        </div>
        <div>Ad beatae deserunt dolores dolorum facilis hic ipsam labore nesciunt, nostrum. A adipisci asperiores aut
            consequuntur dolore eius enim fugiat fugit impedit incidunt iusto libero officia optio quasi reiciendis,
            reprehenderit.
        </div>
        <div>Consectetur consequatur cumque deserunt, dolorum facilis iusto nisi placeat reprehenderit sunt ullam! Atque
            consequatur delectus, dolorem earum facilis iusto magni minima minus mollitia odio quaerat quos veniam
            voluptatibus? Est, quisquam.
        </div>
        <div>At nesciunt omnis saepe! Consequuntur cum cupiditate deserunt, dolor eaque enim exercitationem hic
            inventore ipsa itaque minima nobis numquam provident quis ratione recusandae repudiandae rerum similique
            ullam, vel veniam voluptas.
        </div>
        <div>Ab eos error incidunt ipsam minima natus perspiciatis soluta voluptas? Alias consequuntur culpa doloribus
            laboriosam modi, perferendis perspiciatis quaerat reiciendis reprehenderit saepe! A est minus nihil pariatur
            perspiciatis sequi sunt.
        </div>
        <div>Accusamus at consectetur consequuntur corporis dignissimos dolor dolorum eaque, exercitationem explicabo
            facere ipsa laborum libero nam natus necessitatibus nobis nulla, pariatur quam quasi quos ratione sed sint
            vero. Beatae, perferendis.
        </div>
        <div>Animi asperiores beatae corporis cupiditate delectus deserunt doloribus dolorum earum ex fugiat laboriosam
            laborum laudantium maxime nesciunt nobis odio quod reiciendis repellendus reprehenderit rerum temporibus,
            totam ut, voluptas voluptate voluptatem?
        </div>
        <div>A accusamus, cumque, deleniti est eveniet impedit incidunt minima mollitia odio pariatur perspiciatis ut! A
            blanditiis, debitis eaque illum laborum nihil nisi non nostrum pariatur placeat saepe suscipit, tempore ut?
        </div>
        <div>A ea excepturi harum maxime molestiae natus repellendus. Ad aliquid, animi asperiores blanditiis deleniti
            illo, itaque maiores mollitia necessitatibus optio pariatur reiciendis tempora voluptas. Commodi doloribus
            nostrum reprehenderit totam unde!
        </div>
        <div>Animi dignissimos hic impedit ipsa laborum nam reiciendis sapiente sed sequi sit vel veniam, voluptatibus!
            Aliquam animi asperiores, blanditiis earum eius illo sed? Animi est ipsa, magni numquam repellendus ullam!
        </div>
        <div>Nobis, odit, quia. Amet dolor dolorem eligendi harum minima quasi quia quod sint! Animi dolorem eaque enim
            iusto, natus vitae. Aut blanditiis eius, libero nemo nobis non pariatur soluta voluptas.
        </div>
        <div>A aliquam, atque blanditiis deleniti distinctio doloribus ea eligendi facilis harum impedit inventore
            minus, nisi obcaecati odio officia pariatur perspiciatis placeat recusandae saepe sapiente similique sit
            sunt ullam veritatis vero?
        </div>
        <div>Aliquid, totam ut? Ab adipisci at consectetur debitis deserunt dolorem doloribus error est excepturi
            inventore laboriosam laudantium magnam minus, nam nobis nostrum repellendus voluptates voluptatibus. Facere
            magni minus omnis sit.
        </div>
        <div>Cupiditate incidunt magnam nihil nisi odit perferendis sapiente sit. Dicta laborum nam officia quasi
            voluptatem? Animi aperiam beatae dicta dolores eius, ipsam laborum nostrum odit officiis pariatur, qui
            reiciendis, ut.
        </div>
        <div>Aliquid asperiores cupiditate eligendi excepturi harum impedit nihil porro quas, sequi voluptas. Alias amet
            quod repudiandae tempore voluptatem? Eligendi ipsum quae repudiandae rerum! Est iure non provident quisquam
            sapiente suscipit!
        </div>
        <div>Beatae dignissimos eius explicabo ipsam, ipsum maxime obcaecati recusandae tenetur? Ad distinctio error,
            excepturi id illo inventore ipsa nisi odit, omnis porro provident quia quos sapiente sed suscipit temporibus
            ullam.
        </div>
        <div>Ad aliquid amet culpa ducimus minus modi obcaecati! Culpa, eaque earum error iste maiores neque officiis
            perferendis quas quidem sed. Asperiores aut eius laborum libero obcaecati, quas soluta veniam voluptas.
        </div>
        <div>Asperiores dolorem eligendi ipsa ipsum, nostrum vel? Accusamus adipisci, asperiores consectetur eveniet
            illo molestiae, nam, natus non officiis pariatur praesentium quia quibusdam quis suscipit tempora. Assumenda
            cumque praesentium quod vero.
        </div>
        <div>Alias beatae dignissimos maiores vero voluptatum. Dolores esse, fugit harum maxime minima mollitia odio
            omnis quaerat rerum tenetur. Aliquam aliquid aspernatur commodi consequatur doloribus et illum iste placeat
            quibusdam vero?
        </div>
        <div>Aperiam architecto, aspernatur consequatur consequuntur corporis culpa deserunt doloribus eius enim est
            eveniet expedita facere, incidunt ipsam molestias placeat quae quidem ratione reiciendis sint soluta
            temporibus tenetur unde vel vitae.
        </div>
        <div>Animi iste libero, molestias pariatur porro ratione repudiandae saepe sunt. Aspernatur autem corporis
            deleniti dolorum error harum in iure, magnam maxime possimus quae quos reiciendis soluta tempora ullam velit
            voluptas!
        </div>
        <div>A aliquam architecto at aut blanditiis consectetur cupiditate esse ipsum laborum magnam nemo nisi odit
            optio quo reiciendis repellat repellendus sequi sit veniam, vero voluptas voluptates voluptatum! Distinctio
            illo, laudantium.
        </div>
        <div>Ab asperiores aut cum dolorum enim, fuga incidunt iure, magnam, mollitia nulla odit officia provident
            repudiandae temporibus tenetur. Ab atque enim excepturi quod recusandae. Accusantium eaque itaque non porro
            quam!
        </div>
        <div>Amet debitis dolorum exercitationem odio perferendis possimus ratione ullam voluptates. A accusantium
            architecto corporis culpa deserunt dicta dignissimos dolore est ipsum maiores officiis omnis quasi quo, sed
            temporibus vero voluptate.
        </div>
        <div>A aperiam commodi consequatur corporis debitis dolores enim eos eum eveniet ex expedita facilis fugit illo
            itaque nam, nisi officiis omnis pariatur possimus quasi quidem quo repellendus saepe sint voluptates?
        </div>
        <div>Facilis inventore quisquam quo veritatis. Architecto atque debitis delectus dolore doloribus earum
            perspiciatis quibusdam rerum temporibus! Consequatur, eligendi, eos inventore iusto laborum, maxime pariatur
            rerum saepe sed sit soluta voluptates.
        </div>
        <div>Assumenda aut autem beatae illo incidunt odit officia voluptates? Ab alias atque aut blanditiis doloribus
            dolorum magnam, molestias officiis quisquam rerum sequi voluptates. Asperiores deleniti, doloribus ea
            eveniet recusandae vero!
        </div>
        <div>Accusamus ad alias aliquid cupiditate delectus, dolore esse excepturi exercitationem explicabo fugiat
            impedit, inventore laborum laudantium maiores maxime minima nam nisi placeat quis recusandae reiciendis
            reprehenderit tempora voluptate voluptatibus voluptatum.
        </div>
        <div>Consectetur deserunt dignissimos eligendi ex fuga magnam nisi nulla pariatur perferendis quo quod, repellat
            repellendus repudiandae sed voluptas. Accusamus alias atque eum libero minima non odit quidem sed temporibus
            voluptate.
        </div>
        <div>Assumenda error quidem quisquam rerum. Ad aliquid aut corporis cumque delectus doloremque dolores ducimus
            error explicabo fugiat in laborum laudantium neque nostrum numquam obcaecati perspiciatis rem sint unde
            veritatis, vero?
        </div>
        <div>Alias autem commodi consequuntur culpa dolorem doloribus earum eligendi error eum, ex illum ipsa ipsam
            laborum laudantium nobis non numquam officia possimus provident repellat repudiandae saepe sapiente
            temporibus? Mollitia, voluptatum?
        </div>
        <div>A ad architecto atque culpa cum deserunt earum eveniet, minima odio officiis ratione repellat repudiandae
            saepe, similique sunt tempora temporibus. Ad autem blanditiis consequatur dolorum excepturi laudantium nisi
            nobis voluptatem!
        </div>
        <div>At cum dolorum est eum, excepturi iure quisquam? Aperiam blanditiis fugit nostrum quo! Ad at consequuntur
            distinctio ipsum itaque nemo obcaecati, optio perferendis quam rerum sit, temporibus tenetur voluptas
            voluptates!
        </div>
        <div>Alias amet consequuntur deleniti dicta, eaque esse est excepturi fuga fugiat in ipsum, iusto molestias
            nesciunt nihil numquam omnis provident quasi qui quidem quos saepe sit tempora velit vero voluptatibus!
        </div>
    </div>
</body>
</html>